<template>
  <div class="markdown-content" v-html="renderedContent"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { marked } from 'marked'

interface Props {
  content: string
}

const props = defineProps<Props>()

// 配置marked选项
const markedOptions = {
  breaks: true,
  gfm: true,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  xhtml: false,
  pedantic: false
}

const renderedContent = computed(() => {
  try {
    return marked(props.content, markedOptions)
  } catch (error) {
    console.error('Markdown渲染失败:', error)
    return props.content
  }
})

// 自定义渲染规则
marked.setOptions({
  renderer: {
    heading(token: any) {
      const text = token.text || ''
      const level = token.depth || 1

      // 创建像素风格的标题
      return `<h${level} class="pixel-heading-${level}">${text}</h${level}>`
    },

    paragraph(token: any) {
      return `<p class="pixel-paragraph">${token.text || ''}</p>`
    },

    list(token: any) {
      const type = token.ordered ? 'ol' : 'ul'
      let listItems = ''

      if (token.items) {
        token.items.forEach((item: any) => {
          listItems += `<li class="pixel-list-item">${item.text}</li>`
        })
      }

      return `<${type} class="pixel-list">${listItems}</${type}>`
    },

    link(token: any) {
      return `<a href="${token.href}" class="pixel-link" target="_blank">${token.text || ''}</a>`
    },

    strong(token: any) {
      return `<strong class="pixel-strong">${token.text || ''}</strong>`
    },

    em(token: any) {
      return `<em class="pixel-em">${token.text || ''}</em>`
    },

    code(token: any) {
      return `<code class="pixel-code">${token.text || ''}</code>`
    },

    inlineCode(token: any) {
      return `<code class="pixel-code-inline">${token.text || ''}</code>`
    },

    blockquote(token: any) {
      return `<blockquote class="pixel-blockquote">${token.text || ''}</blockquote>`
    },

    hr() {
      return `<hr class="pixel-divider">`
    },

    table(token: any) {
      let header = ''
      let body = ''

      if (token.header) {
        header = '<thead><tr>'
        token.header.forEach((cell: any) => {
          header += `<th class="pixel-table-header">${cell.text || ''}</th>`
        })
        header += '</tr></thead>'
      }

      if (token.rows) {
        body = '<tbody>'
        token.rows.forEach((row: any) => {
          body += '<tr>'
          row.forEach((cell: any) => {
            body += `<td class="pixel-table-cell">${cell.text || ''}</td>`
          })
          body += '</tr>'
        })
        body += '</tbody>'
      }

      return `<table class="pixel-table">${header}${body}</table>`
    }
  }
})
</script>

<style scoped>
.markdown-content {
  font-size: 11px;
  line-height: 1.8;
  color: var(--pixel-dark);
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
}

/* 重置默认样式，确保像素化外观 */
.markdown-content * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 标题样式 */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-size: 14px;
  margin: 16px 0 12px 0;
  color: var(--pixel-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  border: none;
  border-left: 4px solid var(--pixel-primary);
  padding-left: 8px;
  font-weight: bold;
}

.markdown-content h2 { font-size: 12px; margin: 12px 0 8px 0; }
.markdown-content h3 { font-size: 11px; margin: 10px 0 6px 0; }
.markdown-content h4 { font-size: 10px; margin: 8px 0 4px 0; }
.markdown-content h5 { font-size: 9px; margin: 6px 0 2px 0; }
.markdown-content h6 { font-size: 8px; margin: 4px 0 2px 0; }

/* 段落样式 */
.markdown-content p {
  margin-bottom: 12px;
  line-height: 1.6;
}

/* 列表样式 */
.markdown-content ul,
.markdown-content ol {
  margin: 12px 0;
  padding-left: 24px;
  list-style: none;
}

.markdown-content li {
  margin-bottom: 6px;
  position: relative;
  line-height: 1.6;
}

.markdown-content ul li::before {
  content: "▸";
  position: absolute;
  left: -16px;
  color: var(--pixel-primary);
  font-size: 10px;
}

.markdown-content ol li {
  counter-increment: pixel-list-counter;
}

.markdown-content ol li::before {
  content: counter(pixel-list-counter) ".";
  position: absolute;
  left: -16px;
  color: var(--pixel-primary);
  font-size: 10px;
}

/* 链接样式 */
.markdown-content a {
  color: var(--pixel-info);
  text-decoration: none;
  border-bottom: 2px solid var(--pixel-info);
  padding-bottom: 1px;
  transition: all 0.1s ease;
}

.markdown-content a:hover {
  color: var(--pixel-primary);
  border-bottom-color: var(--pixel-primary);
}

/* 强调样式 */
.markdown-content strong,
.markdown-content b {
  font-weight: bold;
  color: var(--pixel-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.markdown-content em,
.markdown-content i {
  font-style: italic;
  color: var(--pixel-warning);
}

/* 代码样式 */
.markdown-content code {
  font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 3px 6px;
  border: 1px solid var(--pixel-secondary);
  font-size: 10px;
  color: var(--pixel-dark);
  display: inline-block;
}

.markdown-content pre {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  border: 2px solid var(--pixel-secondary);
  border-radius: 0;
  box-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.8),
    4px 4px 0 rgba(0, 0, 0, 0.4);
  overflow-x: auto;
  margin: 12px 0;
}

.markdown-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 10px;
  color: var(--pixel-dark);
}

/* 引用样式 */
.markdown-content blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border: none;
  border-left: 4px solid var(--pixel-primary);
  background-color: rgba(0, 168, 145, 0.05);
  font-style: italic;
  color: var(--pixel-secondary);
  position: relative;
}

.markdown-content blockquote::before {
  content: '"';
  position: absolute;
  left: -8px;
  top: 0;
  color: var(--pixel-primary);
  font-size: 16px;
  font-style: normal;
}

/* 分割线样式 */
.markdown-content hr {
  border: none;
  height: 3px;
  background-color: var(--pixel-secondary);
  margin: 20px 0;
  position: relative;
}

.markdown-content hr::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

/* 表格样式 */
.markdown-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 12px 0;
  font-size: 10px;
  background-color: white;
}

.markdown-content table thead tr {
  background-color: var(--pixel-primary);
  color: white;
}

.markdown-content table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: bold;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--pixel-primary);
  color: white;
}

.markdown-content table td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--pixel-secondary);
  background-color: white;
}

.markdown-content table tbody tr:nth-child(even) td {
  background-color: rgba(0, 168, 145, 0.05);
}

/* 删除线和删除线 */
.markdown-content del,
.markdown-content s {
  text-decoration: line-through;
  color: var(--pixel-secondary);
}

/* 下划线 */
.markdown-content u {
  text-decoration: underline;
  color: var(--pixel-info);
  border-bottom: 1px solid var(--pixel-info);
}

/* 行内代码特殊处理 */
.markdown-content p code {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 1px 3px;
  border-radius: 0;
  font-size: 9px;
  margin: 0 2px;
}

/* 列表内代码 */
.markdown-content li code {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 1px 3px;
  font-size: 9px;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .markdown-content {
    font-size: 10px;
  }

  .markdown-content h1 { font-size: 12px; }
  .markdown-content h2 { font-size: 11px; }
  .markdown-content h3 { font-size: 10px; }

  .markdown-content code,
  .markdown-content pre code {
    font-size: 8px;
  }

  .markdown-content pre {
    padding: 8px 12px;
  }

  .markdown-content th,
  .markdown-content td {
    padding: 6px 8px;
    font-size: 9px;
  }
}

/* 像素化特殊字符增强 */
.markdown-content li::before {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* 表格边框增强 */
.markdown-content table {
  box-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.8),
    4px 4px 0 rgba(0, 0, 0, 0.4);
  border: 2px solid var(--pixel-primary);
  border-radius: 0;
}

/* 块块引用像素化 */
.markdown-content blockquote {
  box-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.8),
    4px 4px 0 rgba(0, 0, 0, 0.4);
  border-right: 2px solid var(--pixel-primary);
  border-bottom: 2px solid var(--pixel-primary);
}

/* 代码块像素化 */
.markdown-content pre {
  box-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.8),
    4px 4px 0 rgba(0, 0, 0, 0.4);
  border: 2px solid var(--pixel-secondary);
}

/* 标题样式 */
.pixel-heading-1,
.pixel-heading-2,
.pixel-heading-3,
.pixel-heading-4,
.pixel-heading-5,
.pixel-heading-6 {
  font-size: 14px;
  margin: 16px 0 12px 0;
  color: var(--pixel-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.pixel-heading-2 { font-size: 12px; margin: 12px 0 8px 0; }
.pixel-heading-3 { font-size: 11px; margin: 10px 0 6px 0; }
.pixel-heading-4 { font-size: 10px; margin: 8px 0 4px 0; }
.pixel-heading-5 { font-size: 9px; margin: 6px 0 2px 0; }
.pixel-heading-6 { font-size: 8px; margin: 4px 0 2px 0; }

/* 段落样式 */
.pixel-paragraph {
  margin-bottom: 12px;
}

/* 列表样式 */
.pixel-list {
  margin: 12px 0;
  padding-left: 20px;
}

.pixel-list-item {
  margin-bottom: 6px;
  position: relative;
}

.pixel-list-item::before {
  content: "▸";
  position: absolute;
  left: -16px;
  color: var(--pixel-primary);
}

/* 链接样式 */
.pixel-link {
  color: var(--pixel-info);
  text-decoration: underline;
  border-bottom: 1px dashed var(--pixel-info);
}

.pixel-link:hover {
  color: var(--pixel-primary);
  border-bottom-color: var(--pixel-primary);
}

/* 强调样式 */
.pixel-strong {
  font-weight: bold;
  color: var(--pixel-primary);
}

.pixel-em {
  font-style: italic;
  color: var(--pixel-warning);
}

/* 代码样式 */
.pixel-code,
.pixel-code-inline {
  font-family: 'Courier New', monospace;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 4px;
  border-radius: 0;
  font-size: 10px;
  color: var(--pixel-dark);
}

.pixel-code {
  display: block;
  padding: 8px 12px;
  margin: 8px 0;
  border: 1px solid var(--pixel-secondary);
  background-color: rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

.pixel-code-inline {
  display: inline;
  padding: 1px 3px;
}

/* 引用样式 */
.pixel-blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--pixel-primary);
  background-color: rgba(0, 168, 145, 0.05);
  font-style: italic;
  color: var(--pixel-secondary);
}

/* 分割线样式 */
.pixel-divider {
  border: none;
  border-top: 3px solid var(--pixel-secondary);
  margin: 20px 0;
  height: 0;
}

/* 表格样式 */
.pixel-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 10px;
}

.pixel-table-header {
  background-color: var(--pixel-primary);
  color: white;
  font-weight: bold;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.pixel-table-cell {
  padding: 8px 12px;
  border: 1px solid var(--pixel-secondary);
  background-color: white;
  text-align: left;
}

/* 像素化表格边框 */
.pixel-table {
  box-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.8),
    4px 4px 0 rgba(0, 0, 0, 0.4);
  border-collapse: separate;
  border-spacing: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .markdown-content {
    font-size: 10px;
  }

  .pixel-heading-1 { font-size: 12px; }
  .pixel-heading-2 { font-size: 11px; }
  .pixel-heading-3 { font-size: 10px; }

  .pixel-code,
  .pixel-code-inline {
    font-size: 9px;
  }
}

/* 像素化特殊字符 */
.pixel-list-item::before {
  font-size: 8px;
}
</style>